<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta content="telephone=no,email=no" name="format-detection">
    <!--禁止自动识别电话号码和邮箱-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="stylesheet" type="text/css" href="css/putForward.css">
    <link rel="stylesheet" type="text/css" href="css/mescroll.min.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/utils.js"></script>
    <title></title>
</head>
<body>
<div id="vueData">
    <header>
        <div class="title_header dis_flex">
            <div></div>
            <div>
                <span>提现</span>
            </div>
            <div></div>
        </div>
    </header>
    <div class="body">
        <div class="dis_flex div_mode">
            <div @click="gotoBankCardView">
                <img src="img/Bankcard.png">
                <span>银行卡</span>
            </div>
            <div @click="gotoWeChatView">
                <img src="img/WeChat.png">
                <span>微信</span>
            </div>
        </div>
        <div class="dis_flex div_Record">
            <span>提现记录</span>
            <span>提现总额:{{countMoney}}</span>
        </div>
        <div id="mescroll" class="mescroll">
            <span v-if="record.length==0">没有记录</span>
            <div v-else class="dis_flex div_bankCard" v-for="item in record">
                <div class="dis_flex">
                    <span v-if="item.typeid==1" class="col_hei">微信提现</span>
                    <span v-else class="col_hei">银行卡提现</span>
                    <span v-if="item.state==1" class="err_ok">审核中</span>
                    <span v-else-if="item.state==2" class="err_in">已到账</span>
                    <span v-else class="err_off">被拒绝</span>
                </div>
                <div class="dis_flex">
                    <span>金额:{{item.amountCash}}</span>
                    <span>{{item.gmt_modified}}</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/mescroll.min.js"></script>
<script>
    let localStore = JSON.parse(localStorage.localStore), pageIndex = 1, pageSize = 20, totalPage = 0;
    let vm = new Vue({
        el: '#vueData',
        data: {
            record: [],
            mescroll: null,
            countMoney:0
        }, mounted: function () {
            let that = this;
            that.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
                up: {
                    callback: that.upCallback, //
                    auto: false,
                    noMoreSize: 20
                }, down: {
                    callback: that.downCallback,
                    auto: false
                }
            });
        }, methods: {
            upCallback() {
                if (totalPage > pageIndex) {
                    loadData(function () {
                        vm.mescroll.endByPage(pageSize, totalPage);
                    }, function () {
                        vm.mescroll.endErr();
                    });
                } else {
                    vm.mescroll.endByPage(pageSize, totalPage);
                }
            }, downCallback() {
                emptyData();
                loadData(function () {
                    vm.mescroll.endByPage(pageSize, totalPage);
                }, function () {
                    vm.mescroll.endErr();
                });
            },
            gotoBankCardView() {
                location.href = 'bankCard.html';
            }, gotoWeChatView() {
                location.href = 'WeChat.html';
            }
        }
    });
    $(function () {
        loadData();
    });

    function loadData(cbOk, cbErr) {
        $.ajax({
            url: '/shanduonewretail/jpresent/presentrecord', data: {
                token: localStore.token,
                page: pageIndex,
                pageSize: pageSize
            }, success: function (res) {
                if (res.success && res.data.length > 0) {
                    if(pageIndex===1){
                        vm.countMoney=res.countMoney;
                    }
                    let data = res.data;
                    $.each(data, function (i, item) {
                        data[i].gmt_modified = getLocalTime(item.gmtModified);
                    });
                    vm.record = vm.record.concat(data);
                    totalPage = res.totalPage;
                }
                cbOk && cbOk();
            }, error: function () {
                cbErr && cbErr();
            }
        });
    }

    function emptyData() {
        let ary = vm.record;
        ary.splice(0, ary.length);
        vm.record = ary;
        totalPage = 0;
        pageIndex = 1;
    }
</script>
</html>